<template>
    <div>
        <Table ref="dataTable" stripe :loading="table.loading" :columns="table.tableColumns" :data="table.tableRows"
               style="margin-top:20px;" @on-select="select" @on-select-cancel="selectCancel"
               @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel" @on-sort-change="changeSort"></Table>
        <div style="margin: 20px; overflow: hidden">
            <div style="float: right;">
                <Page :total="pager.total" :current="pager.pageNo" @on-change="changePageNo" @on-page-size-change="changePageSize"
                      showSizer showTotal></Page>
            </div>
        </div>
    </div>
</template>

<script>
    import * as utils from '@/api/utils-v2'

    export default {
        name: 'RoleSysMenuTable',
        data() {
            return {
                urls: {
                    searchUrl: '/role-sys-menu/admin/pager-cond'
                },
                pager: {
                    pageNo: 1,
                    pageSize: 10,
                    total: 0
                },
                searchOpts: {
                    sortColumn: null,
                    sortOrder: null,
                },
				dataDictCodes: ['IS_ACTIVE','ROLE_IS_DEFAULT'],
				dataDictItems: {},				
                table: {
                    loading: false,
                    tableColumns: [{
                        type: 'selection',
                        width: 52,
                        key: 'id',
                        align: 'center',
                        fixed: 'left'
                    },
                        {
                            width: 60,
                            align: 'center',
                            fixed: 'left',
                            render: (h, params) => {
                                return h('span', params.index + (this.pager.pageNo - 1) * this.pager.pageSize + 1)
                            }
                        },
                        {
title: '角色编号',
key: 'roleId',
minWidth: 120,
sortable: true,
},
{
title: '角色标题',
key: 'roleTitle',
minWidth: 120,
sortable: true,
},
{
title: '角色描述',
key: 'roleDescription',
minWidth: 120,
sortable: true,
},
{
title: '是否默认',
key: 'roleIsDefault',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否默认'),
                h('Tooltip', {
                  props: {
                    content: '是否为用户的默认角色',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
			render: (h, params) => {
			        let dictItem = utils.getDataDictItemDisplayValue(this, 'ROLE_IS_DEFAULT', params.row.roleIsDefault)
			        return h('span', dictItem.displayValue)
			 }
},
{
title: '角色菜单编号',
key: 'roleMenuId',
minWidth: 120,
sortable: true,
},
{
title: '版本号',
key: 'roleMenuVersion',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '版本号'),
                h('Tooltip', {
                  props: {
                    content: '角色菜单版本号',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '创建时间',
key: 'roleMenuCreateTime',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '创建时间'),
                h('Tooltip', {
                  props: {
                    content: '角色菜单创建时间',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '更新时间',
key: 'roleMenuUpdateTime',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '更新时间'),
                h('Tooltip', {
                  props: {
                    content: '角色菜单更新时间',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '是否激活',
key: 'roleMenuIsActive',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否激活'),
                h('Tooltip', {
                  props: {
                    content: '角色菜单是否激活',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
			render: (h, params) => {
			        let dictItem = utils.getDataDictItemDisplayValue(this, 'IS_ACTIVE', params.row.roleMenuIsActive)
			        return h('span', dictItem.displayValue)
			 }
},
{
title: '菜单编号',
key: 'sysMenuId',
minWidth: 120,
sortable: true,
},
{
title: '父菜单编号',
key: 'sysMenuParentId',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '父菜单编号'),
                h('Tooltip', {
                  props: {
                    content: '0表示一级菜单',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '菜单路径',
key: 'sysMenuPath',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '菜单路径'),
                h('Tooltip', {
                  props: {
                    content: '如：/home',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '菜单名称',
key: 'sysMenuName',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '菜单名称'),
                h('Tooltip', {
                  props: {
                    content: '如：_home',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '菜单说明',
key: 'sysMenuDescription',
minWidth: 120,
sortable: true,
},
{
title: '重定向地址',
key: 'sysMenuRedirect',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '重定向地址'),
                h('Tooltip', {
                  props: {
                    content: '如：/home',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '组件',
key: 'sysMenuComponent',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '组件'),
                h('Tooltip', {
                  props: {
                    content: 'Main、parentView、具体的vue路径',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '菜单等级',
key: 'sysMenuMenuLevel',
minWidth: 120,
sortable: true,
},
{
title: '菜单排序',
key: 'sysMenuMenuOrder',
minWidth: 120,
sortable: true,
},
{
title: '菜单配置编号',
key: 'sysMenuMetaId',
minWidth: 120,
sortable: true,
},
{
title: '菜单名称',
key: 'sysMenuMetaTitle',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '菜单名称'),
                h('Tooltip', {
                  props: {
                    content: '中文，显示的名称',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '菜单图标',
key: 'sysMenuMetaIcon',
minWidth: 120,
sortable: true,
},
{
title: '跳转的页面',
key: 'sysMenuMetaHref',
minWidth: 120,
sortable: true,
},
{
title: '是否隐藏面包屑',
key: 'sysMenuMetaHideInBread',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否隐藏面包屑'),
                h('Tooltip', {
                  props: {
                    content: '0:false、1:true设为1后此级路由将不会出现在面包屑中，示例看QQ群路由配置',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '是否隐藏菜单',
key: 'sysMenuMetaHideInMenu',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否隐藏菜单'),
                h('Tooltip', {
                  props: {
                    content: '0:false、1:true设为1后在左侧菜单不会显示该页面选项',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '是否缓存',
key: 'sysMenuMetaNotCache',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否缓存'),
                h('Tooltip', {
                  props: {
                    content: '0:false、1:true设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '可访问角色',
key: 'sysMenuMetaAccess',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '可访问角色'),
                h('Tooltip', {
                  props: {
                    content: '多个角色用逗号分隔',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},
{
title: '关闭前触发方法名',
key: 'sysMenuMetaBeforeCloseName',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '关闭前触发方法名'),
                h('Tooltip', {
                  props: {
                    content: '设置该字段，则在关闭当前tab页时会去\'@/router/before-close.js\'里寻找该字段名对应的方法，作为关闭前的钩子函数',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            }
},

                        {
                            title: '操作',
                            key: 'action',
                            width: 80,
                            align: 'center',
                            fixed: 'right',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.showDetail(params.row)
                                            }
                                        }
                                    }, '详情')
                                ])
                            }
                        }
                    ],
                    tableRows: [],
                    selections: []
                }
            }
        },
        computed: {},
        mounted() {
            this.search()
        },
        methods: {
            search() {
                this.$emit('searchTable')
            },
            showDetail(row) {
                this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
            },
            select(selections, row) {
              utils.select(this, selections, row)
            },
            selectCancel(selections, row) {
              utils.selectCancel(this, selections, row)
            },
            selectAll(selections) {
              utils.selectAll(this, selections)
            },
            selectAllCancel(selections) {
              utils.selectAllCancel(this, selections)
            },
            changeSort(sortColumn) {
                utils.changeSort(this, sortColumn)
            },
            changePageNo(pageNo) {
                utils.changePageNo(this, pageNo)
            },
            changePageSize(pageSize) {
                utils.changePageSize(this, pageSize)
            }
        }
    }
</script>

<style>
</style>
